<template>
    <div class="content">
        <van-nav-bar
                title="快来寻找你想吃的美味吧！"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
                style="background-color: #009be2"
        />
        <van-search v-model="value" placeholder="请输入搜索关键词" show-action style="background-color: white">
            <template #action>
                <button style="background-color: #fced6e; border: none;"><div @click="search">搜索</div></button>
            </template>
        </van-search>
        <el-card class="box-card" v-show="cardShow" style="background-color: white">
            <div slot="header" class="clearfix">
                <span>{{title}}</span>
            </div>
            <!--<van-card  v-for="(good,index) in goods" :key="index"
                       :num="good.num"
                       :price="good.price"
                       :desc="good.desc"
                       :title="good.title"
                       :thumb="good.thumb"
            >
            </van-card>-->
            <ul>
                <li v-for="(shop,index) in shops" :key="index">
                    <div style="border-radius: 10px;background-color: #fced6e; display: flex;align-items: center;justify-content: flex-start;margin-bottom: 30px;padding: 20px 0"  @click="toShop(shop)">
                        <div style="display:inline-block;float: left;margin-left: 80px">
                            <img :src="shop.logoSrc" width="150" height="150" alt="">
                        </div>
                        <div style="display: flex;align-items: center; justify-content: center">
                            <h3 style="width: 195px;margin-bottom: 5px;padding-left: 80px;text-align: left">{{shop.shopName}}</h3>
                            <div style="width: 195px;font-size: 15px;padding-left: 80px;text-align: left">
                                <span style="margin: 20px" v-if="shop.deliveryTime!==null">{{shop.deliveryTime}}分钟</span>
                                <br>
                            </div>
                            <p style="width: 200px;margin: 10px">店铺主打</p>
                            <p style="width: 80px;height: 50px;margin-top: 48px;padding: 0 120px" v-if="shop.desc!==null">{{shop.desc}}</p>
                            <p style="width: 50px;height: 50px;margin: 10px" v-if="shop.desc===null">暂无描述</p>
                        </div>
                    </div>

                </li>
            </ul>
        </el-card>
        <!--填充-->
        <div style="height:60px;display:block;background-color: white"></div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "Search",
        data(){
            return{
                totalPrice:null,
                show:true,
                value:'',
                cardShow:true,
                title:'好评店铺推荐',
                shops:[
                    {
                        shopName:"蜜雪冰城",
                        desc:"冰淇淋与茶",
                        totalSales: 2000,
                        minCost:"15",
                        deliveryCost:"3",
                        deliveryTime:"15",
                        logoSrc:"upload/蜜雪冰城.jpg"
                    },
                  {
                    shopName:"汉堡王",
                    desc:"美味汉堡",
                    totalSales: 2000,
                    minCost:"15",
                    deliveryCost:"3",
                    deliveryTime:"20",
                    logoSrc:"upload/汉堡王.jfif"
                  },

                ],
            }
        },
      activated(){
            this.searchTop();
        },
        methods: {
            onClickLeft(){
                this.$router.push({
                    path:'/home_user',
                });

            },

            search(){
                console.log(this.value);
                this.axios.get("http://localhost:8084/findGoodsAndShopsByValue",{
                    params:{
                        value:this.value
                    }
                }).then(resp=>{
                    console.log(resp.data);
                    this.shops = resp.data;
                })
            },
          searchTop(){
            this.axios.get("http://localhost:8084/findGoodsAndShopsTop",{
              params:{
                top:2
              }
            }).then(resp=>{
              console.log(resp.data);
              this.shops = resp.data;
            })
          },
            /*进入店铺界面*/
            toShop(shop){
                console.log("进入店铺界面"+shop.sid);
                this.$router.push({
                    name:'shop',
                    params:{
                        shop:shop
                    }
                })
            },


        }
    }
</script>

<style scoped>
.content {
  background-color: white;
}
</style>
